<template>
    <div>
        <div class="datainput">
            <el-row type="flex" class="row-1" justify="flex-start">
                <el-col :span="6">
                    <span class="label">订单类型</span>
                    <el-select v-model="orderType" style="width: 70%">
                        <el-option label="充值" value="TOP_UP"></el-option>
                        <el-option label="提现" value="WITHDRAW"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <span class="label">交易时间</span>
                    <el-date-picker v-model="createTime" type="datetime" style="width: 70%"></el-date-picker>
                </el-col>
            </el-row>
            <el-row type="flex" class="row-2" justify="flex-start">
                <el-col :span="6">
                    <span class="label">客户ID</span>
                    <el-input v-model="consumerId" clearable style="width: 70%"></el-input>
                </el-col>
                <el-col :span="6">
                    <span class="label">订单状态</span>
                    <el-select v-model="orderStatus" clearable style="width: 70%">
                        <el-option label="已提交" value="COMMITTED"></el-option>
                        <el-option label="已创建" value="CREATED"></el-option>
                        <el-option label="失败" value="FAILURE"></el-option>
                        <el-option label="已完成" value="SUCCESS"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6" :offset="1">
                    <el-button type="primary" @click="search()">搜索</el-button>
                    <el-button style="marign-left: 20px" @click="clear()">清空条件</el-button>
                </el-col>
            </el-row>
        </div>

        <div class="datatable">
            <el-table :data="currows" @row-click="rowClick">
                <el-table-column
                    v-for="item in tableConfig"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                    :formatter="item.formatter"
                    :min-width="item.minWidth"
                    align="center"
                ></el-table-column>
            </el-table>
            <el-pagination
                background
                layout="total, prev, pager, next, sizes, jumper"
                :page-size.sync="pageInfo.pageSize"
                :page-sizes="[10, 20, 30, 40, 50]"
                :total="total"
                :current-page.sync="pageInfo.pageNum"
                style="text-align: center; margin-top: 20px"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import { getOrderInfo } from '@/api/order'

export default {
    name: 'RechargeWithDrawalQuery',
    data() {
        return {
            orderType: 'TOP_UP',
            createTime: null,
            consumerId: null,
            orderStatus: null,
            tableData: [
                {
                    orderId: 12,
                    consumerId: 6,
                    fundId: 2,
                    createTime: '2020-11-09T11:11:00',
                    cardId: 2,
                    orderAmount: 200.5,
                    orderCount: 0.2,
                    orderType: 'SUBSCRIPTION',
                    orderStatus: 'SUCCESS',
                },
                {
                    orderId: 13,
                    consumerId: 6,
                    fundId: 2,
                    createTime: '2020-11-09T11:11:00',
                    cardId: 2,
                    orderAmount: 9990,
                    orderCount: 10,
                    orderType: 'REDEMPTION',
                    orderStatus: 'SUCCESS',
                },
                {
                    orderId: 14,
                    consumerId: 6,
                    fundId: 2,
                    createTime: '2020-11-10T11:11:00',
                    cardId: 2,
                    orderAmount: 1,
                    orderCount: 1,
                    orderType: 'SUBSCRIPTION',
                    orderStatus: 'FAILURE',
                },
                {
                    orderId: 15,
                    consumerId: 6,
                    fundId: 2,
                    createTime: '2020-11-10T11:11:00',
                    cardId: 2,
                    orderAmount: 100,
                    orderCount: 1,
                    orderType: 'SUBSCRIPTION',
                    orderStatus: 'COMMITTED',
                },
                {
                    orderId: 16,
                    consumerId: 6,
                    fundId: 2,
                    createTime: '2020-11-10T11:11:00',
                    cardId: 2,
                    orderAmount: 100,
                    orderCount: 1,
                    orderType: 'REDEMPTION',
                    orderStatus: 'COMMITTED',
                },
            ],
            bankName: [
                '中国农业银行',
                '中国农业银行',
                '中国农业银行',
                '中国农业银行',
                '中国农业银行',
            ],
            fundName: [
                '第二基金',
                '第二基金',
                '第二基金',
                '第二基金',
                '第二基金',
            ],
            cardNumber: [767641495, 767641495, 767641495, 767641495, 767641495],
            consumerName: ['hzh', 'hzh', 'hzh', 'hzh', 'hzh'],
            pageInfo: {
                pageNum: 1,
                pageSize: 10,
            },
            tableConfig: [
                {
                    prop: 'orderType',
                    label: '订单类型',
                    formatter(row, column, cellValue) {
                        switch (cellValue) {
                            case 'REDEMPTION':
                                return '赎回'
                            case 'SUBSCRIPTION':
                                return '申购'
                            case 'TOP_U':
                                return '充值'
                            case 'WITHDRAW':
                                return '提现'
                            default:
                                return '无'
                        }
                    },
                },
                {
                    prop: 'createTime',
                    label: '交易时间',
                    formatter(row, column, cellValue) {
                        return cellValue.replace('T', ' ')
                    },
                },
                { prop: 'consumerId', label: '客户ID' },
                { prop: 'consumerName', label: '客户姓名' },
                { prop: 'orderAmount', label: '交易金额' },
                {
                    prop: 'orderStatus',
                    label: '订单状态',
                    formatter(row, column, cellValue) {
                        switch (cellValue) {
                            case 'COMMITTED':
                                return '已提交'
                            case 'FAILURE':
                                return '失败'
                            case 'SUCCESS':
                                return '已完成'
                            case 'CREATED':
                                return '已创建'
                            default:
                                return '无'
                        }
                    },
                },
            ],
        }
    },
    methods: {
        search() {
            console.log(this.consumerId)
            getOrderInfo(this.consumerId, this.orderType).then((res) => {
                this.tableData = res.data.data
                this.bankName = res.data.bankName
                this.fundName = res.data.fundName
                this.cardNumber = res.data.cardNumber
                this.consumerName = res.data.consumerName
            }),
                (err) => {
                    console.log(err)
                }
        },
        clear() {
            this.orderType = 'TOP_UP'
            this.createTime = null
            this.consumerId = null
            this.orderStatus = null
            getOrderInfo(this.consumerId, this.orderType).then((res) => {
                this.tableData = res.data.data
                this.bankName = res.data.bankName
                this.fundName = res.data.fundName
                this.cardNumber = res.data.cardNumber
                this.consumerName = res.data.consumerName
            }),
                (err) => {
                    console.log(err)
                }
        },
        changeStatus(row) {
            console.log(row)
        },
        rowClick(row) {
            console.log(row)
        },
    },
    computed: {
        rows() {
            return this.tableData.map((item, index) => {
                return {
                    ...item,
                    consumerName: this.consumerName[index],
                }
            })
        },
        total() {
            return this.rows.length
        },
        currows() {
            return this.rows.slice(
                (this.pageInfo.pageNum - 1) * this.pageInfo.pageSize,
                this.pageInfo.pageNum * this.pageInfo.pageSize
            )
        },
    },
    mounted() {
        this.search()
    },
}
</script>

<style scoped>
.datainput {
    width: 95%;
    height: 172px;
    margin-top: 15px;
    background-color: rgba(255, 255, 255, 100);
    color: rgba(16, 16, 16, 100);
    font-size: 16px;
    font-family: Roboto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.datainput div[class^='row'] {
    margin-left: 80px;
}
.datainput .row-2 {
    margin-top: 27px;
}
.datainput span.label {
    display: inline-block;
    width: 25%;
}

.datatable {
    margin-top: 15px;
    width: 80%;
}
.datatable ::v-deep .table-stripe {
    background-color: #f8f8f8;
}

.el-pagination.is-background ::v-deep .el-pager li {
    background-color: #ffffff;
}
.el-pagination.is-background ::v-deep button {
    border: 1px solid rgba(217, 217, 217, 100);
}
</style>
